import React, { useState } from 'react'
import { Button } from '../ui/Button'
import { Badge } from '../ui/Badge'
import { 
  X, 
  Filter, 
  Calendar, 
  Tag, 
  User,
  Crown
} from 'lucide-react'

interface FilterPanelProps {
  filters: {
    categories: string[]
    dateRange: string
    sortBy: string
    authors: string[]
  }
  onChange: (filters: any) => void
  onClose: () => void
  isPremiumUser: boolean
}

const categories = [
  { id: 'cs.AI', label: 'Artificial Intelligence', group: 'Computer Science' },
  { id: 'cs.CL', label: 'Computation and Language', group: 'Computer Science' },
  { id: 'cs.CV', label: 'Computer Vision', group: 'Computer Science' },
  { id: 'cs.LG', label: 'Machine Learning', group: 'Computer Science' },
  { id: 'math.CO', label: 'Combinatorics', group: 'Mathematics' },
  { id: 'math.DG', label: 'Differential Geometry', group: 'Mathematics' },
  { id: 'physics.comp-ph', label: 'Computational Physics', group: 'Physics' },
  { id: 'stat.ML', label: 'Machine Learning', group: 'Statistics' }
]

const dateRanges = [
  { value: 'all', label: 'All time' },
  { value: '7d', label: 'Last 7 days' },
  { value: '30d', label: 'Last 30 days' },
  { value: '3m', label: 'Last 3 months' },
  { value: '1y', label: 'Last year' }
]

export function FilterPanel({ filters, onChange, onClose, isPremiumUser }: FilterPanelProps) {
  const [localFilters, setLocalFilters] = useState(filters)

  const handleCategoryToggle = (categoryId: string) => {
    const updated = localFilters.categories.includes(categoryId)
      ? localFilters.categories.filter(c => c !== categoryId)
      : [...localFilters.categories, categoryId]
    
    setLocalFilters({ ...localFilters, categories: updated })
  }

  const handleDateRangeChange = (dateRange: string) => {
    setLocalFilters({ ...localFilters, dateRange })
  }

  const handleApply = () => {
    onChange(localFilters)
    onClose()
  }

  const handleReset = () => {
    const resetFilters = {
      categories: [],
      dateRange: 'all',
      sortBy: 'relevance',
      authors: []
    }
    setLocalFilters(resetFilters)
    onChange(resetFilters)
  }

  const hasActiveFilters = localFilters.categories.length > 0 || 
                          localFilters.dateRange !== 'all' ||
                          localFilters.authors.length > 0

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center space-x-2">
          <Filter className="h-5 w-5 text-gray-600" />
          <h3 className="text-lg font-semibold text-gray-900">Filters</h3>
        </div>
        
        <Button variant="ghost" size="sm" onClick={onClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

      <div className="space-y-6">
        {/* Categories */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h4 className="font-medium text-gray-900 flex items-center">
              <Tag className="h-4 w-4 mr-2" />
              Categories
            </h4>
            {!isPremiumUser && (
              <Badge variant="outline" className="text-xs">
                <Crown className="h-3 w-3 mr-1" />
                Limited
              </Badge>
            )}
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-48 overflow-y-auto">
            {categories.slice(0, isPremiumUser ? categories.length : 4).map(category => (
              <label key={category.id} className="flex items-center p-2 hover:bg-gray-50 rounded">
                <input
                  type="checkbox"
                  checked={localFilters.categories.includes(category.id)}
                  onChange={() => handleCategoryToggle(category.id)}
                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-3"
                />
                <div>
                  <div className="text-sm font-medium text-gray-900">{category.label}</div>
                  <div className="text-xs text-gray-500">{category.id}</div>
                </div>
              </label>
            ))}
          </div>
          
          {!isPremiumUser && categories.length > 4 && (
            <div className="mt-3 p-3 bg-blue-50 rounded-lg">
              <p className="text-sm text-blue-800">
                Upgrade to Premium to access all {categories.length} categories and advanced filtering options.
              </p>
              <Button 
                size="sm" 
                variant="outline"
                className="mt-2"
                onClick={() => window.location.href = '/app/subscription?feature=advanced_search'}
              >
                Upgrade Now
              </Button>
            </div>
          )}
        </div>

        {/* Date Range */}
        <div>
          <h4 className="font-medium text-gray-900 mb-3 flex items-center">
            <Calendar className="h-4 w-4 mr-2" />
            Publication Date
          </h4>
          
          <div className="space-y-2">
            {dateRanges.map(range => (
              <label key={range.value} className="flex items-center">
                <input
                  type="radio"
                  name="dateRange"
                  value={range.value}
                  checked={localFilters.dateRange === range.value}
                  onChange={() => handleDateRangeChange(range.value)}
                  className="text-blue-600 focus:ring-blue-500 mr-3"
                />
                <span className="text-sm text-gray-700">{range.label}</span>
              </label>
            ))}
          </div>
        </div>

        {/* Authors (Premium only) */}
        {isPremiumUser && (
          <div>
            <h4 className="font-medium text-gray-900 mb-3 flex items-center">
              <User className="h-4 w-4 mr-2" />
              Authors
            </h4>
            
            <input
              type="text"
              placeholder="Search by author name..."
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none text-sm"
            />
            <p className="text-xs text-gray-500 mt-1">
              Enter author names to filter papers (coming soon)
            </p>
          </div>
        )}
      </div>

      {/* Actions */}
      <div className="flex items-center justify-between mt-6 pt-6 border-t border-gray-200">
        <Button
          variant="ghost"
          size="sm"
          onClick={handleReset}
          disabled={!hasActiveFilters}
        >
          Reset All
        </Button>
        
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" onClick={onClose}>
            Cancel
          </Button>
          <Button size="sm" onClick={handleApply}>
            Apply Filters
          </Button>
        </div>
      </div>
    </div>
  )
}